<template>
    <div id="home">
        <div class="header">
            <router-link to='/home/city' tag="div" class="adress">{{ cityInfo.title ? cityInfo.title : area }}</router-link>
            <div id="allmap"></div>
            <router-link to='/pages/search' tag="div">
                <van-field left-icon="search" placeholder="搜索商品" />
            </router-link>
        </div>
        <div class="swiper">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item,index) in banner" :key="index">
                    <img :src="item.image_url" alt />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="channel">
            <router-link
                tag="div"
                :to="`/category/categorylist?id=${item.id}`"
                v-for="(item,index) in channel"
                :key="index"
            >
                <img :src="item.icon_url" alt />
                <p>{{item.name}}</p>
            </router-link>
        </div>
        <div class="brand">
            <router-link tag="p" :to="`/pages/brandlist`">品牌制造商直供</router-link>
            <div class="content">
                <router-link
                    tag="div"
                    :to="`/pages/branddetail?id=${item.id}`"
                    v-for="(item,index) in brandList"
                    :key="index"
                >
                    <div>
                        <p>{{item.name}}</p>
                        <p>{{item.floor_price}}元起</p>
                    </div>
                    <img :src="item.new_pic_url" alt />
                </router-link>
            </div>
        </div>
        <div class="newgoods">
            <router-link tag="div" class="newgoods-top" :to="`/pages/newgoods?isNew=`+1">
                <div class="top">
                    <p class="up">新品首发</p>
                    <p class="down">查看全部</p>
                </div>
            </router-link>
            <div class="list">
                <ul>
                    <router-link
                        tag="li"
                        :to="`/pages/goods?id=${item.id}`"
                        v-for="(item,index) in newGoods"
                        :key="index"
                    >
                        <img :src="item.list_pic_url" alt />
                        <p>{{item.name}}</p>
                        <p>{{item.goods_brief}}</p>
                        <p>￥{{item.retail_price}}</p>
                    </router-link>
                </ul>
            </div>
        </div>
        <div class="hotgoods">
            <router-link tag="div" class="hotgoods-top" :to="`/pages/newgoods?isHot=`+1">
                <div class="top">
                    <p>人气推荐 好物精选</p>
                    <p class="all">查看全部</p>
                </div>
            </router-link>
            <div class="list">
                <ul>
                    <router-link
                        tag="li"
                        :to="`/pages/goods?id=${item.id}`"
                        v-for="(item,index) in hotGoods"
                        :key="index"
                    >
                        <img :src="item.list_pic_url" alt />
                        <p>{{item.name}}</p>
                        <p>{{item.goods_brief}}</p>
                        <p>￥{{item.retail_price}}</p>
                    </router-link>
                </ul>
            </div>
        </div>
        <div class="topicList">
            <div class="topicList-top">
                专题精选
                <span class="icon"></span>
            </div>
            <div class="list">
                <ul>
                    <router-link
                        tag="li"
                        v-for="(item,index) in topicList"
                        :key="index"
                        :to="`/pages/topicdetail?id=${item.id}`"
                    >
                        <img :src="item.item_pic_url" alt />
                        <div class="info">
                            <div class="desc">
                                <p class="title">{{item.title}}</p>
                                <p class="subtitle">{{item.subtitle}}</p>
                            </div>
                            <div class="price">{{item.price_info}}元起</div>
                        </div>
                    </router-link>
                </ul>
            </div>
        </div>
        <div class="newcategory">
            <div class="list" v-for="(item,index) in newCategoryList" :key="index">
                <div class="head">{{item.name}}好物</div>
                <div class="content">
                    <router-link
                        tag="div"
                        class="items"
                        :to="`/pages/goods?id=${conitem.id}`"
                        v-for="(conitem,conindex) in item.goodsList"
                        :key="conindex"
                    >
                        <img :src="conitem.list_pic_url" alt />
                        <p>{{conitem.name}}</p>
                        <p>{{conitem.retail_price}}</p>
                    </router-link>
                    <router-link
                        tag="div"
                        class="items-last"
                        :to="`/category/categorylist?id=${item.id}`"
                    >
                        <p>{{item.name}}好物</p>
                        <span class="icon"></span>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { index } from "@/api/home";
import { mapState, mapMutations } from "vuex";

export default {
    name: "home",
    data() {
        return {
            banner: [],
            channel: [],
            brandList: [],
            newGoods: [],
            hotGoods: [],
            topicList: [],
            newCategoryList: [],
            goodsList: [],
            area:'',
        };
    },
    computed: {
        ...mapState(['cityInfo'])
    },
    created() {},
    mounted() {
        console.log(this.cityInfo);
        this.getData();
        var that = this;
        var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.754407,34.776794), 18);  // 初始化地图,设置中心点坐标和地图级别
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
               console.log(r);
               that.area = r.address.city;
               that.setInfo(r)
            }
            else {
                alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
    },
    methods: {
        ...mapMutations(['setInfo']),
        getData() {
            index().then((res) => {
                // console.log(res);
                this.banner = res.banner;
                // console.log(this.banner);
                this.channel = res.channel;
                // console.log(this.channel);
                this.brandList = res.brandList;
                // console.log(this.brandList);
                this.newGoods = res.newGoods;
                // console.log(this.newGoods);
                this.hotGoods = res.hotGoods;
                // console.log(this.hotGoods);
                this.topicList = res.topicList;
                // console.log(this.topicList);
                this.newCategoryList = res.newCategoryList;
                console.log(this.newCategoryList);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
#home {
    height: calc(100% - 1.33333rem);
    overflow: auto;
    padding-bottom: 1.3333rem;
    background-color: #f4f4f4;
}
.header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 12.5px 0 5px;
    position: fixed;
    top: 0;
    display: flex;
    z-index: 9999;
    align-items: center;
    height: 44px;
    background-color: #fff;
    .adress {
        max-width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.swiper {
    margin-top: 44px;
    height: 200px;
    width: 100%;
    .my-swipe {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
}
.channel {
    display: flex;
    padding: 11px 0;
    background-color: #fff;
    div {
        width: 25%;
        text-align: center;
        img {
            height: 33px;
            width: 33px;
            display: inline-block;
        }
        p {
            margin: 12px 0;
        }
    }
}
.brand {
    width: 100%;
    margin-top: 10px;
    background-color: #fff;
    p {
        padding: 22px 0;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
        width: 365px;
        div {
            position: relative;
            width: 180px;
            height: 117px;
            margin-bottom: 5px;
            div {
                position: absolute;
                top: 0;
                left: 0;
                padding: 5px;
                p {
                    height: 16px;
                    margin: 12px 0;
                    padding: 0;
                    text-align: left;
                }
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
.newgoods {
    width: 100%;
    height: 100%;
    .newgoods-top {
        width: 100%;
        height: 3.4667rem;
        margin-top: 0.2667rem;
        background: url("../../assets/images/bgnew.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        align-items: center;
        display: flex;
        justify-content: center;
        .top {
            width: 2.4rem;
            height: 2.08rem;
            .up {
                color: #8c9bae;
                font-size: 0.426667rem;
                margin: 0.426667rem 0;
            }
            .down {
                width: 100%;
                height: 0.666667rem;
                line-height: 0.666667rem;
                background-color: #d8e4f0;
                color: #8c9bae;
            }
        }
    }
    .list {
        background-color: #fff;
        margin-top: 0.267rem;
        padding-bottom: 0.1333rem;
        ul {
            overflow: auto;
            width: 100%;
            white-space: nowrap;
            li {
                width: 3.73333rem;
                height: 5.54667rem;
                margin: 0.06667rem 0 0.06667rem 0.3333rem;
                display: inline-block;
                img {
                    width: 3.7333rem;
                    height: 3.7333rem;
                }
                p {
                    width: 94%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 0.10667rem;
                }
                :nth-child(2) {
                    text-indent: 1em;
                    font-size: 0.4rem;
                    font-weight: 700;
                    margin: 0.1067rem 0 0.4rem 0;
                }
                :nth-child(3) {
                    text-indent: 1em;
                    color: #8a8a8a;
                    font-size: 0.32rem;
                    margin: 0.16067rem 0 0.32rem 0;
                }
                :nth-child(4) {
                    text-indent: 1em;
                    color: #9c3232;
                    font-size: 0.32rem;
                    margin: 0.16067rem 0 0.32rem 0;
                }
            }
        }
    }
}
.hotgoods {
    width: 100%;
    .hotgoods-top {
        width: 100%;
        height: 3.466667rem;
        margin-top: 0.26667rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("../../assets/images/bgtopic.png") no-repeat;
        background-size: 100% 100%;
        .top {
            width: 3.70376rem;
            height: 2.08rem;
            p {
                color: #b1a279;
                font-size: 0.42667rem;
                vertical-align: middle;
                margin: 0.426667rem 0;
            }
            .all {
                background-color: #f4e9cb;
                width: 2.4rem;
                height: 0.66667rem;
                line-height: 0.66667rem;
                margin: 0.36rem auto 0 auto;
                font-size: 0.29333rem;
            }
        }
    }
    .list {
        background-color: #fff;
        margin-top: 0.267rem;
        padding-bottom: 0.1333rem;
        ul {
            overflow: auto;
            width: 100%;
            white-space: nowrap;
            li {
                width: 3.73333rem;
                height: 5.54667rem;
                margin: 0.06667rem 0 0.06667rem 0.3333rem;
                display: inline-block;
                img {
                    width: 3.7333rem;
                    height: 3.7333rem;
                }
                p {
                    width: 94%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    margin-top: 0.10667rem;
                }
                :nth-child(2) {
                    text-indent: 1em;
                    font-size: 0.4rem;
                    font-weight: 700;
                    margin: 0.1067rem 0 0.4rem 0;
                }
                :nth-child(3) {
                    text-indent: 1em;
                    color: #8a8a8a;
                    font-size: 0.32rem;
                    margin: 0.16067rem 0 0.32rem 0;
                }
                :nth-child(4) {
                    text-indent: 1em;
                    color: #9c3232;
                    font-size: 0.32rem;
                    margin: 0.16067rem 0 0.32rem 0;
                }
            }
        }
    }
}
.topicList {
    margin-top: 0.26667rem;
    background: #fff;
    .topicList-top {
        text-align: center;
        padding: 0.48rem;
        vertical-align: middle;
        .icon {
            display: inline-block;
            width: 0.42667rem;
            height: 0.42667rem;
            margin-left: 0.06667rem;
            background: url("../../assets/images/right.png") no-repeat;
            background-size: 100% 100%;
            vertical-align: middle;
        }
    }
    .list {
        white-space: nowrap;
        overflow: auto;
        height: 6.679467rem;
        ul {
            width: 100%;
            height: 100%;
            li {
                display: inline-block;
                width: 7.66667rem;
                height: 100%;
                margin-left: 0.33333rem;
                img {
                    display: block;
                    width: 7.66667rem;
                    height: 4.33333rem;
                    border-radius: 0.13333rem;
                }
                .info {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 0.56rem;
                    height: 1.786667rem;
                    .desc {
                        width: 90%;
                        .title {
                            font-size: 0.4rem;
                            font-weight: 700;
                            margin: 0.10667rem 0 0.56rem 0;
                            text-align: left;
                        }
                        .subtitle {
                            text-align: left;
                            width: 90%;
                            margin: 0.106667rem 0 0.32rem 0;
                            color: #8a8a8a;
                            font-size: 0.32rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                    .price {
                        margin-top: 0.10667rem;
                        color: #9c3232;
                        font-size: 0.32rem;
                    }
                }
            }
        }
    }
}
.newcategory {
    margin-top: 0.26667rem;
    padding: 0 0.13333rem 0.33333rem 0.13333rem;
    .head {
        padding: 0.33333rem 0;
        text-align: center;
    }
    .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 9.73333rem;
        margin: 0 auto;
        .items {
            width: 4.8rem;
            background: #fff;
            margin-bottom: 0.13333rem;
            padding-bottom: 0.13333rem;
            img {
                display: block;
                width: 4.02667rem;
                height: 4.02667rem;
                margin: 0 auto;
            }
        }
        .items-last {
            width: 4.8rem;
            margin-bottom: 0.13333rem;
            padding-bottom: 0.13333rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            background: #fff;
            p {
                height: 0.44rem;
                width: 100%;
                line-height: 0.44rem;
                color: #333;
                font-size: 0.44rem;
                text-align: center;
            }
            .icon {
                display: inline-block;
                width: 0.93333rem;
                height: 0.93333rem;
                background: url("../../assets/images/rightbig.png") no-repeat;
                background-size: 100% 100%;
                margin-top: 0.8rem;
            }
        }
    }
}
</style>